---
title: 投稿
tags: 
date: 2024-01-31 15:31:28
---

<div style="text-align: center;">
<span id="element"></span>
</div>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="//code.bdstatic.com/npm/leancloud-storage@4.13.2/dist/av-min.js"></script>
    <!-- <script src="https://unpkg.com/typed.js@2.1.0/dist/typed.umd.js"></script> -->
    <!-- <script src="sparticles.min.js"></script> -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>
<!-- <script src="../vue-components/myComponent.vue"></script> -->
</head>
<style>
    body {
      font-family: Arial, sans-serif;
    }
    label {
      cursor: default;
      color: #808080;
      font-size: 15px;
    }
    form {
      max-width: 400px;
      margin: 20px auto;
      padding: 20px;
      border: 0px solid #ccc;
      border-radius: 5px;
      background-color: var(--bg-content-color);
    }
    input[type="text"], textarea {
      width: 100%;
      padding: 10px;
      margin: 10px 0;
      display: inline-block;
      border: 0px solid #ccc;
      border-radius: 10px;
      box-sizing: border-box;
      background: var(--bg-color);
      color: var(--text-color);
      resize: none;
    }
    input[type="submit"] {
      background-color: #2b8786;
      color: white;
      /* padding: 15px 20px; */
      border: none;
      border-radius: 10px;
      cursor: pointer;
      float: right;
      width:100px;
      height:50px;
    }
    input[type="submit"]:hover {
      background-color: #3FAEAD;
    }
    button {
       background-color: #2b8786;
      color: white;
      /* padding: 15px 20px; */
      border: none;
      border-radius: 10px;
      cursor: pointer;
      float: right;
      width:100px;
      height:50px;
    }
    .btn {
      position: relative;
      background-color: #2b8786;
      color: #ffffff;
      border: none;
      padding: 10px 20px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    .btn:disabled {
      background-color: #6c757d;
      cursor: not-allowed;
    }
    .loader {
      border: 4px solid #f3f3f3;
      border-top: 4px solid #3498db;
      border-radius: 50%;
      width: 16px;
      height: 16px;
      animation: spin 2s linear infinite;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-top: -8px;
      margin-left: -8px;
      z-index: 1;
      display: none;
    }
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    #tip {
      padding: 10px;
      opacity: 0.8; /* 初始时将数据的透明度设置为0，隐藏数据 */
      /* transition: opacity 0.5s ease; 添加过渡动画效果 */
      text-align: center;
    }

  </style>
<body>

  <div id="app">
    <my-component></my-component>
  </div>

    <div id="tip">将好用和好玩的任何东西分享给大家！</div>
    <div id="tip">你的投稿如若被采纳，将被发布在“每日分享”中！</div>
    <form id="myForm">
            <div class="mb-3">
              <label for="nickname" class="form-label">昵称</label>
              <input type="text" class="form-control" id="nickname" oninput="validateForm()">
            </div>
            
            <div class="mb-3">
              <label for="contact" class="form-label">联系方式</label>
              <input type="text" class="form-control" id="contact" oninput="validateForm()">
            </div>

            <div class="mb-3">
              <label for="submission" class="form-label">提交内容</label>
              <textarea class="form-control" id="submission" rows="3" oninput="validateForm()"></textarea>
            </div>

          <button type="button" class="btn btn-primary" onclick="submitForm()" disabled>
          <span class="btn-text">提交</span>
          <span class="loader"></span>
          </button>
     </form>
    

  <script>

        new Vue({
         el: '#app',
         components: {
           'my-component': myComponent
         }
       });

    function validateForm() {
      const nickname = document.getElementById('nickname').value;
      const contact = document.getElementById('contact').value;
      const submission = document.getElementById('submission').value;
      const submitButton = document.querySelector('.btn');
      if (nickname.trim() !== '' && contact.trim() !== '' && submission.trim() !== '') {
        submitButton.removeAttribute('disabled');
      } else {
        submitButton.setAttribute('disabled', 'disabled');
      }
    }
    
    function submitForm() {
      const formData = {
        nickname: document.getElementById('nickname').value,
        contact: document.getElementById('contact').value,
        submission: document.getElementById('submission').value
      };
        // 隐藏提交按钮的文字
        document.querySelector('.btn-text').style.display = 'none';
       // 显示loading动画
         const loader = document.querySelector('.loader');
         loader.style.display = 'inline-block';

      fetch('https://api.lintiebao.cn/1.1/classes/submission', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-LC-Id': 'ynMAn7XOvvxivG61hKnibx0P-gzGzoHsz',
          'X-LC-Key': 'bJozAX2UEPCNqmriHhTiceIc'
        },
        body: JSON.stringify(formData)
      })
      .then(response => response.json())
      .then(data => {
        console.log('数据提交成功:', data);
            // 清空输入框数据
        document.getElementById('nickname').value = '';
        document.getElementById('contact').value = '';
        document.getElementById('submission').value = '';
        // 隐藏loading动画
        loader.style.display = 'none';
        // 显示提交按钮的文字
        document.querySelector('.btn-text').style.display = 'inline';
        // 添加弹窗提示
        // alert('提交成功！');
        
         
        
        Swal.fire({
          title: '提交成功!',
          text: '你的投稿如若被采纳，将被发布在“每日分享”中！',
          icon: 'success',
          confirmButtonColor: '#2b8786',
          confirmButtonText: '确定'
        });

        const submitButton = document.querySelector('.btn');
        submitButton.setAttribute('disabled', 'disabled');
      })
      .catch(error => {
        console.error('数据提交失败:', error);
      });
    }
  </script>
 </body>

</html>